<template>
  <div id="gid_tc" style="float:left;">
    <div id="gid"></div>
    <div class="mengceng"></div>
  </div>
</template>

<script>
/* eslint-disable */

import { KG } from "@/utils/graph/KG";
// import { GraphPainter } from "@/utils/GraphPainter";
import { deleteNodeAPI } from "@/api/kgeditor/elementeditor";
import { loadDataAPI } from "../../../../api/kgbuilder/kgbuilder";
import router from "../../../../router";

let nameMapInfo = {
  kgNameName:"kgName",kgIdName:"kgID",

  typeListName:"typeVOS",nodesName: "nodeVOS",linksName: "tripleVOS",

  typeIdName:"id",nodeIdName: "id",linkIdName: "id",
  typeNameName:"type",typeColorName:"color",typeRName:"radius",
  nodeUriName:"nodeAtId",nodeLabelName:"label_ZH",nodeTypeIdName:"type_id",

  sIdName: "s_id", tIdName: "o_id", predicateName:"predicate",

  nodeColorName:"color",nodeRName:"radius",nodeXName:"hor",nodeYName:"ver"
}

export default {
  name: "graphComponent",
  props: {
    kgId: { type:Number }
  },
  data() {
    return {
      gid: "gid",
      KG: null,
      root: this.$parent,
      KGCacheName: "KgCache"
    }
  },
  created() {
    // let kgInfo = this.loadKG();
    // if(kgInfo == null){
    //   console.log("get no kgInfo , load from session")
    //   kgInfo = this.$store.state.kgInfo;
    // }

    // this.KG = new KG(this.gid,true,kgInfo,this,nameMapInfo);
  },
  mounted() {

    this.loadData();

    // this.KG.display();

    // window.addEventListener("beforeunload", () => {
    //   this.cacheKG();
    // });

    //从kgBuilder传来的知识图谱信息，包含该kgId对应的图的所有信息
    //数据格式:
    //kgId:知识图谱文件名，即唯一ID
    //NodeVOS:该图谱所有节点数据
    //TripleVOS:该图谱所有三元组数据
    // if (this.$store.state.kgInfo)
    /**
     * Node格式
     *  id：节点id
     *  label_ZH：中文标签
     *  node_type：节点类型
     *
     * Link格式
     *  id：连接id
     *  s_id：源节点id
     *  o_id：目标节点id
     *  predicate：连接类型
     */

  },
  methods:{
    loadData() {
      loadDataAPI(
        this.kgId,
         (res) => {
          console.log("RES",res)
           this.KG = new KG(this.gid,true,res,this,nameMapInfo);
           this.KG.display();
           this.$emit("kgLoaded");
         },
        (errorMessage) => {
          this.$message.error("加载失败：" + errorMessage);
        },()=>{
        });
    },
    cacheKG(){
      if(sessionStorage.getItem(this.KGCacheName)) sessionStorage.removeItem(this.KGCacheName);
      let KGStr = JSON.stringify(this.KG.kgInfo);
      sessionStorage.setItem(this.KGCacheName,KGStr);
    },
    loadKG(){
      if(sessionStorage.getItem(this.KGCacheName)){
        let KGObj = JSON.parse(sessionStorage.getItem(this.KGCacheName));
        sessionStorage.removeItem(this.KGCacheName);
        return KGObj;
      }
      else return null;
    },
    //图内部按钮删除节点
    deleteNodeByBtn(){
      let _this = this;
      this.$confirm("确定要删除当前选中节点?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        deleteNodeAPI({
          id: _this.KG.selectedNode.uuid,
          kgID: _this.KG.kgInfo.id
        },
        function() {
          _this.KG.deleteNodeById(_this.KG.selectedNode.uuid);
          _this.$message.success("删除节点成功");
        },
        function(error) {
          _this.$message.error("删除节点失败" + error);
        });
      });
    }
  }
};
</script>

<style scoped>
#gid_tc {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}
#gid {
  height: 100%;
  width: 100%;
}
</style>